<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>博客页面</title>
</head>

<body>
    <!-- 侧边栏导航 -->
    <nav class="sidebar">
        <ul>
            <li><a href="#">博客园</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">新随笔</a></li>
            <li><a href="#">草稿箱</a></li>
            <li><a href="#">联系</a></li>
            <li><a href="#">订阅</a></li>
            <li><a href="#">管理</a></li>
            <li><a href="#">CSDN主页</a></li>
        </ul>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <!-- 博主信息及封面 -->
        <div class="blogger-info">
            <img src="https://picsum.photos/200" alt="博主头像" class="avatar">
            <div class="cover">
                <img src="https://picsum.photos/800/200" alt="封面图片">
                <div class="blogger-profile">
                    <h1>LogicYarn</h1>
                    <a href="#" class="follow-btn">关注</a>
                    <div class="stats">
                        <span>园龄: 10个月</span>
                        <span>粉丝: 0</span>
                        <span>关注: 4</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 博客文章列表 -->
        <div class="blog-posts">
            <div class="blog-post">
                <h2><a href="#">博客园博客申请教程，附自定义漂亮主页样式详细教程—2024</a></h2>
                <p>摘要: 最近在自定义博客园主题页面样式时，遇到一些问题，所以决定写下此文作为一篇博客...</p>
                <div class="post-meta">
                    <span>6</span>
                    <span>0</span>
                    <span>0</span>
                    <a href="#" class="edit-btn">编辑</a>
                    <a href="#" class="read-btn">阅读</a>
                </div>
            </div>
            <div class="blog-post">
                <h2><a href="#">一名ICer的博客开帖记录</a></h2>
                <p>摘要: 前言 园子内容已有3-4年之久，虽然对于一名ICer来说，园子内容偏少，但是仍然“咸鱼IC”等一众大佬的优质好文...</p>
                <div class="post-meta">
                    <span>5</span>
                    <span>0</span>
                    <span>0</span>
                    <a href="#" class="edit-btn">编辑</a>
                    <a href="#" class="read-btn">阅读</a>
                </div>
            </div>
        </div>
    </main>

    <!-- 侧边栏小工具 -->
    <aside class="sidebar-widgets">
        <div class="calendar-widget">
            <img src="https://picsum.photos/200/300" alt="日历图片">
            <div class="calendar">
                <h3>2024年9月</h3>
                <table>
                    <thead>
                        <tr>
                            <th>日</th>
                            <th>一</th>
                            <th>二</th>
                            <th>三</th>
                            <th>四</th>
                            <th>五</th>
                            <th>六</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>28</td>
                            <td>29</td>
                            <td>30</td>
                            <td>31</td>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>11</td>
                            <td>12</td>
                            <td>13</td>
                            <td>14</td>
                            <td>15</td>
                            <td>16</td>
                            <td>17</td>
                        </tr>
                        <tr>
                            <td>18</td>
                            <td>19</td>
                            <td>20</td>
                            <td>21</td>
                            <td>22</td>
                            <td>23</td>
                            <td>24</td>
                        </tr>
                        <tr>
                            <td>25</td>
                            <td>26</td>
                            <td>27</td>
                            <td>28</td>
                            <td>29</td>
                            <td>30</td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="links-widget">
            <h3>常用链接</h3>
            <ul>
                <li><a href="#">我的随笔</a></li>
                <li><a href="#">我的评论</a></li>
                <li><a href="#">我的收藏</a></li>
                <li><a href="#">最新评论</a></li>
                <li><a href="#">我的标签</a></li>
            </ul>
        </div>
        <div class="tags-widget">
            <h3>我的标签(1)</h3>
            <ul>
                <li><a href="#">暂无</a></li>
            </ul>
        </div>
    </aside>

    <script src="script.js"></script>
</body>

</html>